<template>
	<view class="search_wraper">

		<!-- #ifdef APP-PLUS || H5-->
		<view class="header_search" :style="'margin-top:' + navigationBarHeight">
			<u-search class="u_search" v-model="searchData" @blur="searchChange" maxlength="15" shape="square"
				actionText="取消" @custom="backJump" placeholder="请输入" :clearabled="true"></u-search>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="header_search" style="margin-top:66rpx ">
			<u-search class="u_search" v-model="searchData" @blur="searchChange" maxlength="15" shape="square"
				actionText="取消" @custom="backJump" placeholder="搜索" :clearabled="true"></u-search>
		</view>
		<!-- #endif -->
		<view class="search_info" v-if="list.allCount==0 && !searchFlag">
			<view class="search_info_wraper" >
				<view class="search_type">
					<text class="search_type_title">搜索历史</text>
					<view class="search_history_clear" v-if="userSearch.length>0" @click="clearHistory()">
						<image class="search_clear_img"
							src="https://dnsverify.pfmoto.com/appstatic/community/icon_community_clear.png" mode="">
						</image>
						<text class="search_clear_tip" >清空</text>
					</view>
				</view>
				<view class="search_info search_info_history" :style="'height:'+height+'rpx'">
					<text v-for="item in userSearch" class="search_info_item"
						@click="selectHistoryItem(item)">{{item|showKeyWords}}</text>

				</view>
			</view>
			<view class="search_info_wraper">
				<view class="search_type">
					<text class="search_type_title">热门搜索</text>

				</view>
				<view class="search_info">
					<text v-for="item in hotList" @click="selectItem(item)"
						class="search_info_item">{{item.showKeyWords}}</text>
				</view>
			</view>
		</view>
		<view v-if="list.allCount>0">
			<u-tabs lineColor="#EA5404" :list="tabs" :current="currentIndex" @change="selectTab"></u-tabs>
			<!-- 最新 -->
			<!-- <view class="search_list" v-if="list.allCount>0&&(tabs[currentIndex].name=='全部'||currentIndex==0)">
				<view class="search_ca" >
					<text >全部({{list.allCount}})</text>
					<image @click="enterTabs('全部')" class="search_icon_arrow"
						src="https://dnsverify.pfmoto.com/appstatic/my/my_icon_smlink.png" mode="autoFit"></image>
				</view>
				<view class="search_item" v-for="item in list.allSearch" :key="item.id" @click="enterDetail(item)">
					<image v-if="item.webpublishCoverArticle &&item.subType!==4" class="search_item_cover"
						:src="item.webpublishCoverArticle||'dnsverify.pfmoto.com/appstatic/community/banner.png?x-amz-process=image/resize,w_750/quality,Q_80'"
						mode="aspectFill"></image>
					<image v-if="item.checkUrls &&item.subType==4" class="search_item_cover"
						:src="item.checkUrls[0]||'dnsverify.pfmoto.com/appstatic/community/banner.png?x-amz-process=image/resize,w_750/quality,Q_80'"
						mode="aspectFill"></image>
					<text v-if="item.subType!=3&&item.subType!=2" class="search_item_content">{{item.content}}</text>
					<view class="item_right" v-else>
						<view class="titleArticle">{{item.titleArticle}}</view>
						<view class="sumnery_">{{item.content}}</view>
					</view>
				</view>
			</view> -->
			<!-- 最新 -->
			<view class="search_list" v-if="list.newCount>0&&(tabs[currentIndex].name=='最新'||currentIndex==0)">
				<view class="search_ca" v-if="tabs[currentIndex].name!='最新'">
					<text >最新({{list.newCount}})</text>
					<image @click="enterTabs('最新')" class="search_icon_arrow"
						src="https://dnsverify.pfmoto.com/appstatic/my/my_icon_smlink.png" mode="autoFit"></image>
				</view>
				<view class="search_item" v-for="item in list.newSearch" :key="item.id" @click="enterDetail(item)">
					<image v-if="item.webpublishCoverArticle&&item.subType !==1" class="search_item_cover"
						:src="item.webpublishCoverArticle||'dnsverify.pfmoto.com/appstatic/community/banner.png?x-amz-process=image/resize,w_750/quality,Q_80'"
						mode="aspectFill"></image>
					<image v-if="item.checkUrls&&item.subType ==1" class="search_item_cover"
						:src="item.checkUrls[0]||'dnsverify.pfmoto.com/appstatic/community/banner.png?x-amz-process=image/resize,w_750/quality,Q_80'"
						mode="aspectFill"></image>
					<text v-if="item.subType!=3&&item.subType!=2" class="search_item_content">{{item.content}}</text>
					<view class="item_right" v-else>
						<view class="titleArticle">{{item.titleArticle}}</view>
						<view class="sumnery_">{{item.content}}</view>
					</view>
				</view>
			</view>
			<!-- 共创 -->
			<view class="search_list" v-if="list.togetherCount>0&&(tabs[currentIndex].name=='共创' ||currentIndex==0)">
				<view class="search_ca" v-if="tabs[currentIndex].name!='共创'">
					<text >共创({{list.togetherCount}})</text>
					<image @click="enterTabs('共创')" class="search_icon_arrow"
						src="https://dnsverify.pfmoto.com/appstatic/my/my_icon_smlink.png" mode="autoFit"></image>
				</view>
				<view class="search_item" v-for="item in list.togetherSearch" :key="item.id" @click="enterDetail(item)">
					<image v-if="item.webpublishCoverArticle&&item.subType !==1" class="search_item_cover"
						:src="item.webpublishCoverArticle||'dnsverify.pfmoto.com/appstatic/community/banner.png?x-amz-process=image/resize,w_750/quality,Q_80'"
						mode="aspectFill"></image>
					<image v-if="item.checkUrls&&item.subType ==1" class="search_item_cover"
						:src="item.checkUrls[0]||'dnsverify.pfmoto.com/appstatic/community/banner.png?x-amz-process=image/resize,w_750/quality,Q_80'"
						mode="aspectFill"></image>
					<text class="search_item_content">{{item.content}}</text>
				</view>
			</view>
			<!-- 问答 -->
			<view class="search_list" v-if="list.answerCount>0&&(tabs[currentIndex].name=='问答'||currentIndex==0)">
				<view class="search_ca" v-if="tabs[currentIndex].name!=='问答'">
					<text >问答({{list.answerCount}})</text>
					<image @click="enterTabs('问答')" class="search_icon_arrow"
						src="https://dnsverify.pfmoto.com/appstatic/my/my_icon_smlink.png" mode="autoFit"></image>
				</view>
				<view class="search_item" v-for="item in list.answerSearch" :key="item.id" @click="enterDetail(item)">
					<image v-if="item.checkUrls" class="search_item_cover"
						:src="item.checkUrls[0]||'dnsverify.pfmoto.com/appstatic/community/banner.png?x-amz-process=image/resize,w_750/quality,Q_80'"
						mode="aspectFill"></image>
					<text class="search_item_content">{{item.content}}</text>
				</view>
			</view>
		</view>
		<view class="noData" v-if="list.allCount ==0&&searchFlag">
			<text class="noData_text">啊哦，暂未搜索到相关内容</text>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	const util = require('@/utils/util.js');
	const network = require('@/manager/network-manager.js');
	const dialog = require('@/utils/dialog.js');
	export default {
		data() {
			return {
				tabs: [{
					name: '全部'
				}],
				navigationBarHeight: app.globalData.statusBarHeight + 'px',
				searchFlag: false,
				searchData: '',
				currentIndex: 0,
				hotList: [],
				userSearch: [],
				list: {
					allCount:0
				},
				totail: 0,
				jumpTimer:null
			}
		},
		filters:{
			showKeyWords(val){
				if(val.length>6){
					return val.substring(0,6)+'...'
				}else{
					return val
				}
			}
		},
		mounted() {
			this.userSearch = uni.getStorageSync('UserSearch') || []
			this.getAllSearch()
			this.getUserSearchList()
			console.log(this.navigationBarHeight)
		},
		computed: {
			height: {
				get() {
					if (this.userSearch.length) {
						return 120
					} else {
						return 0
					}
				}
			}
		},
		methods: {
			getAllSearch(){
				if(!this.searchData){
					return
				}
				var uri = app.globalData.config.interfaces.URL_USERSEARCH_ALLLIST;
				var that = this
				var params = {
					
					"keyword": this.searchData,
				
				};
				network.get(uri, params, 'form').then(res => {
				
				
				
					if (res.code == 200) {
						that.tabs =[{name:'全部'}]
						this.searchFlag = true
						if(res.data.newCount>0){
							that.tabs.push({name:'最新'})
						}
						if(res.data.togetherCount>0){
							that.tabs.push({name:'共创'})
						}
						if(res.data.answerCount>0){
							that.tabs.push({name:'问答'})
						}
					
						res.data.answerSearch.map(item => {
							item.content = item.content.replace(/<\/?.+?>/g, "").replace(/ /g, "");
							if (item.checkUrls) {
								item.checkUrls = item.checkUrls.split(',')
							}
						
						})
						res.data.allSearch.map(item => {
							item.content = item.content.replace(/<\/?.+?>/g, "").replace(/ /g, "");
							if (item.checkUrls) {
								item.checkUrls = item.checkUrls.split(',')
							}
						
						})
						res.data.newSearch.map(item => {
							item.content = item.content.replace(/<\/?.+?>/g, "").replace(/ /g, "");
							if (item.checkUrls) {
								item.checkUrls = item.checkUrls.split(',')
							}
						
						})
						res.data.togetherSearch.map(item => {
							item.content = item.content.replace(/<\/?.+?>/g, "").replace(/ /g, "");
							if (item.checkUrls) {
								item.checkUrls = item.checkUrls.split(',')
							}
						
						})
						console.log(res.data)
						var searchHistory = uni.getStorageSync('UserSearch')
						
						if (that.searchData) {
							if (searchHistory.indexOf(this.searchData) == -1) {
								if (!searchHistory) {
									uni.setStorageSync('UserSearch', [this.searchData])
									this.userSearch = uni.getStorageSync('UserSearch')
								} else {
								
									searchHistory.splice(0, 0, this.searchData)
									uni.setStorageSync('UserSearch', searchHistory)
									this.userSearch = uni.getStorageSync('UserSearch')
								}
							}else{
								searchHistory.splice(searchHistory.indexOf(this.searchData), 1)
								searchHistory.splice(0, 0, this.searchData)
								uni.setStorageSync('UserSearch', searchHistory)
								that.userSearch = uni.getStorageSync('UserSearch')
							}
						}
						
						that.list = res.data
					} else {
				
					}
				}).catch(res => {
				
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			enterDetail(row){
				var _self = this
				if (row.subType == '1') {
					var url = '/module_community/pages/moments/detail/detail?id=' + row.id
				} else if(row.subType == '2'||row.subType == '3'){
					var url = '/module_community/pages/article/detail/detail?id=' + row.id
				}else{
					var url = '/module_community/pages/questionAndAnswer/detail/detail?id=' + row.id
				}
				if (this.type == 'detail') {
					return false
				}
				if (this.jumpTimer) {
					return
				}
				this.jumpTimer = setTimeout(function() {
					//#ifndef MP-WEIXIN
					wx.navigateTo({
						url: url,
						fail(err) {
							clearTimeout(_self.jumpTimer)
							_self.jumpTimer = null
						},
						success() {
							clearTimeout(_self.jumpTimer)
							_self.jumpTimer = null
				
						}
					});
					//#endif
					uni.navigateTo({
						url: url,
						fail(err) {
							clearTimeout(_self.jumpTimer)
							_self.jumpTimer = null
						},
						success() {
							clearTimeout(_self.jumpTimer)
							_self.jumpTimer = null
				
						}
					});
				}, 500)
			},
			enterTabs(val) {
				this.tabs.map((item,index)=>{
					if(item.name == val){
						this.currentIndex = index
					}
				})
				
				
				this.getSearchList()
			},
			selectTab(val) {
				this.currentIndex = val.index
				if(val.index == 0){
					this.getAllSearch()
				}else{
					this.getSearchList()
				}
				
			},
			clearHistory() {
				this.userSearch = []
				uni.setStorageSync('UserSearch', [])
			},
			selectHistoryItem(val) {
				this.searchData = val
				this.getAllSearch()
			},
			selectItem(val) {
				this.searchData = val.keyword
				this.getAllSearch()
			},
			getUserSearchList() {
				var uri = app.globalData.config.interfaces.URL_USERSEARCH_LIST;
				var that = this
				var params = {
					"pageNum": 1,
					"pageSize": 15,
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						res.data.map(item=>{
							if(item.keyword.length>10){
								item.showKeyWords = item.keyword.substring(0,10)+'...'
							}else{
								item.showKeyWords = item.keyword
							}
						})
						that.hotList = res.data
					} else {

					}
				}).catch(res => {

					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			getSearchList() {
				var uri = app.globalData.config.interfaces.URL_SEARCH_CATEGORY;
				var that = this
				var idx = 0
				if(this.tabs[this.currentIndex].name == '问答'){
					idx = 1
				}else if(this.tabs[this.currentIndex].name == '共创'){
					idx = 2
				}else if(this.tabs[this.currentIndex].name == '最新'){
					idx =3
				}
				var params = {
					"pageNum": 0,
					"pageSize": 100,
					"keyword": this.searchData,
					"askOrCom":idx
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.searchFlag = true
						
						
						res.data.list.map(item => {
							item.content = item.content.replace(/<\/?.+?>/g, "").replace(/ /g, "");
							if (item.checkUrls) {
								item.checkUrls = item.checkUrls.split(',')
							}

						})
						if(that.tabs[that.currentIndex].name == '最新'){
							that.list.newSearch = res.data.list
						}else if(that.tabs[that.currentIndex].name == '共创'){
							that.list.togetherSearch = res.data.list
						}else if(that.tabs[that.currentIndex].name == '问答'){
							that.list.answerSearch = res.data.list
						}
						
						
						var searchHistory = uni.getStorageSync('UserSearch')
						if (that.searchData) {
							if (searchHistory.indexOf(that.searchData) == -1) {
								if (!searchHistory) {
									uni.setStorageSync('UserSearch', [that.searchData])
									that.userSearch = uni.getStorageSync('UserSearch')
								} else {

									searchHistory.splice(0, 0, that.searchData)
									uni.setStorageSync('UserSearch', searchHistory)
									that.userSearch = uni.getStorageSync('UserSearch')
								}
							}
						}



					} else {

					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			searchChange(val) {
				console.log(val)
				if(this.searchData.length>15){
					uni.showToast({
						title: '最多输入15个搜索关键字，请重试',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				this.getAllSearch()

			},
			backJump() {
				if(this.searchFlag){
					this.searchFlag = false
					this.list.allCount = 0
					this.searchData = ''
				}else{
				
					uni.navigateBack({
						delta: 1
					})	
					// #ifdef MP-WEIXIN
					wx.navigateBack({
						delta: 1
					})
					// #endif
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.search_icon_arrow {
		width: 16rpx;
		height: 22rpx;
	}

	.search_info_history {
		height: 120rpx;
		overflow: hidden;
	}

	/deep/.u-tabs__wrapper__nav__item {
		width: 20%;
	}
	.noData{
		text-align: center;
		margin-top: 100rpx;
		pointer-events: none;
	}
	.noData_text{
		font-size: 28rpx;
		color: #3D3A3A;
		text-align: center;
		padding-top: 200rpx;
	}
	.search_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		border-bottom: 1px solid #EDEDED;
		margin: 30rpx 0;
		padding-bottom: 30rpx;
		
	}
	.header_search{
		/* #ifdef MP-WEIXIN */
		width: 500rpx;
		/* #endif */
	}
	.search_item_content {
		width: 100%;
		height: 110rpx;
		flex: 1 1 0;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 150.2%;
		/* or 18px */
		
		
		/* 力帆-黑 */
		
		color: #3D3A3A;

	}
	.item_right{
		width: calc(100% - 120rpx);
	}
	.titleArticle{
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-style: normal;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 20px;
		/* identical to box height */
		
		
		/* 力帆-黑 */
		
		color: #3D3A3A;
	}
	.sumnery_{
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 150.2%;
		/* or 18px */
		
		
		/* 学习系统-辅色-1 */
		
		color: #B3B3B3;
	}
	.search_ca {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
		
		padding-bottom: 20rpx;
	}

	.search_item_cover {
		width: 108rpx;
		height: 108rpx;
		margin-right: 22rpx;
	}

	.search_info_wraper {
		width: 100%;
	}

	.search_wraper {
		width: calc(100% - 60rpx);
		height: calc(100vh - 40rpx);
		overflow-y: auto;
		padding: 30rpx;
		background: url(https://dnsverify.pfmoto.com/appstatic/my/my_icon_list_background.jpg) no-repeat;
		    background-size: cover;
	}

	.search_info {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.search_info_item {
		background: rgba(61, 58, 58, 0.1);
		border-radius: 2px;
		padding: 0 20rpx;
		white-space: nowrap;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		height: 52rpx;
		line-height: 52rpx;
		font-size: 28rpx;
		color: #3D3A3A;
		text-overflow: ellipsis;
		

	}

	.search_type {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 50rpx 0;
	}

	.search_type_title {
		font-weight: 600;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #3D3A3A;
	}

	.search_clear_img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
	}

	.search_clear_tip {
		font-size: 28rpx;
		line-height: 40rpx;

		color: #ADB0AE;
	}

	.search_history_clear {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>
